﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>imges1</title>

    <link href="~/Content/img3d.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
    <script src="https://unpkg.com/swiper/js/swiper.js"></script>
    <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    
    <div class="container">
        <div>
            <img src="~/img/logo.png" /><span style="font-size:30px; font-family:KaiTi;"> 随查科技网图库</span>
        </div>
        <hr />
        <!-- 轮播 -->
        <div id="main">
            <div class="swiper-container" id="looper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="~/img/tuku1/t1.jpg" />
                    </div>
                    <div class="swiper-slide">
                        <img src="~/img/tuku1/t2.jpg" />
                    </div>
                    <div class="swiper-slide">
                        <img src="~/img/tuku1/t3.jpg" />
                    </div>
                    <div class="swiper-slide">
                        <img src="~/img/tuku1/t4.jpg" />
                    </div>
                    <div class="swiper-slide">
                        <img src="~/img/tuku1/t6.jpg" />
                    </div>
                </div>

            </div>

        </div>
        <div class="anniu" style="padding-top:30px;padding-left:500px">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                点击下载
            </button>
        </div>
        <div class="modal fade" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">来着站内的提示</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        您好请先<a href="~/Account/Login">登录</a>
                    </div>
                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>

                </div>
            </div>
        </div>
        <ul class="nav nav-pills nav-stacked " style="position:fixed ;left:0;top:200px ;border:1px solid black; border-radius:12px">
            <li><a href="~/Account/Login">登录</a></li>
            <li><a href="~/Account/Register">注册</a></li>
            <li><a href="~/Home/Index">返回首页</a></li>

        </ul>
    </div>
    <script>
        var swiper = new Swiper('#looper', {
 	touchRatio : -1,//利用touchRatio制作与拖动方向相反的Swiper
    loop : true,
    slidesPerView:5,
    effect: 'coverflow',
    grabCursor: true,
    centeredSlides: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    slidesPerView: 'auto',
    coverflow: {
        rotate: 0,// 旋转的角度
        stretch: 100,// 拉伸   图片间左右的间距和密集度
        depth: 50,// 深度   切换图片间上下的间距和密集度
        modifier: 3,// 修正值 该值越大前面的效果越明显
        slideShadows : false// 页面阴影效果
    }
        });

    </script>
</body>
</html>
